<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05_元素样式操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值
		 css()            功能：添加任何样式下的属性和属性值
		                  1个参:获取匹配集合元素中第一个元素的css属性值
						  2个参:设置匹配集合元素中，所有元素的属性和属性值
						  n个参:多层设置匹配集合元素中所有元素的属性和属性值
						  语法糖：css({"属性":"属性值","属性":"属性值"})
						  .btn{
							  border: 1px soild red;
						  }
		 height()和width()    功能：匹配集合元素中第一个元素的高度和宽度值
		                      无参：匹配集合元素中第一个元素的高度和宽度值
							  有参：设置匹配集合元素中第一个元素的高度和宽度值
		 outHeight()和outWidth()
		                      功能：元素的宽高度
							  无参：获取元素宽高度，包含内边距加边框
							  有参：只允许传bool值
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .box{
				 background: #aa55ff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid red;
			 }
			 .result{
				 margin-top: 20px;
				 font-weight: 700;
			 }
		 </style>
	</head>
	<body>
		<!-- html结构  创建两个div平行 中间保留6个button 第一个div：显示效果区域-->
		<!-- .box添加样式属性：背景色，内外边距：20px 加个边框5px
		     .result添加样式属性：上外边：20px，字体加粗：
			 引入jq框架
		 -->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含：内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包含：内边距+边框+外边距】</button>
		<!-- 2.显示效果提示区域 -->
		<div id="result" class="result"></div>
		<script>
			/* 1.点击获取颜色的按钮 获取背景颜色值 */
			$("#getColorBtn").click(function(){
				//jq css("属性名")  获取属性值
				var bgColor=$(".box").css("background");
				$("#result").text("获取背景颜色值是："+bgColor);
			});
			/* 2.点击：设置背景颜色，按钮，设置背景颜色值 */
			$("#setColorBtn").click(function(){
			//.box添加颜色：橙色
			$(".box").css("background","orange");
			//#result 添加文本：效果修改为橙色
			$("#result").text("效果修改为橙色");
			});
			/* 3.点击：设置多层效果按钮  设置效果如下：①背景色 ②倒角 ③盒子阴影。。。  */
		    $("#setBtn").click(function(){
			$(".box").css({
				"background-image":"url(../img/王也.png)",
				"background-size":"100%",
				"border-radius":"50%",
				"box-shadow":"5px 5px 5px black",
				"height":"300px",
				"width":"300px",
				});
			});
			/* 4.点击：获取元素宽度  按钮  获取当前元素的宽高度 */
			$("#getWidthBtn").click(function(){
			var w=$(".box").width();
			$("#result").text("获取宽度是："+w+"px");
			});
			/* 5.点击：获取元素高度【...】按钮算高度 */
			$("#gbpBtn").click(function(){
			var gbp=$(".box").outerHeight();
			$("#result").text("高度为:"+gbp+"px");
			});
			/* 6.点击  获取元素高度【...】按钮，传参bool */
			$("#bpmBtn").click(function(){
			var bpm=$(".box").outerHeight(true);
			$("#result").text("实际元素高度："+bpm+"px");
			});
		</script>
	</body>
</html>